<template>
  <div class="AbnormalDetails">
    <a-card>
      <a-form>
        <a-form-item label="订单编号" :label-col="{ span: 2}" :wrapper-col="{ span: 16}">
          <span>1902111234332345</span>
        </a-form-item>
      </a-form>
      <a-table :columns="columns" :dataSource="data" :pagination="false" bordered></a-table>
    </a-card>
    <a-card style="margin-top:2%;height:600px;">
      <div class="popForm">
        <ul>
          <li>第一层</li>
          <li>第二层</li>
          <li>第三层</li>
          <li>第四层</li>
        </ul>
        <p>上货前图片：</p>
        <ul>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
        </ul>
        <p>上货后图片：</p>
        <ul>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
        </ul>
      </div>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "商品名称",
    dataIndex: "goodsName",
    scopedSlots: { customRender: "goodsName" },
    align: "center"
  },
  {
    title: "购买数量",
    dataIndex: "buyNumber",
    scopedSlots: { customRender: "buyNumber" },
    align: "center"
  },
  {
    title: "订单价格",
    dataIndex: "orderPrice",
    scopedSlots: { customRender: "orderPrice" },
    align: "center"
  },
  {
    title: "优惠前金额",
    dataIndex: "discountsBeforeSum",
    scopedSlots: { customRender: "discountsBeforeSum" },
    align: "center"
  },
  {
    title: "促销活动",
    dataIndex: "salesAmount",
    scopedSlots: { customRender: "salesAmount" },
    align: "center"
  },
  {
    title: "是否有优惠券",
    dataIndex: "isCoupon",
    scopedSlots: { customRender: "isCoupon" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];
export default {
  name: "AbnormalDetails",
  data() {
    return {
      columns,
      data
    };
  },
  watch: {},
  computed: {},
  methods: {},
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AbnormalDetails {
  width: 100%;
}
.popForm {
  padding: 0 1%;
}
.popForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.popForm img {
  width: 100%;
}
.popForm p {
  margin: 1% 0;
}
</style>
